<!DOCTYPE html>
<html>
<head>
	<title></title>
    <include file='public/head'>
        <style>
			.layui-legend-size{font-size:14px !important;}
			.layui-nopadding{padding:0 !important;}
			.layui-overflow{overflow:auto;}
			.layui-nomargin{margin: 0 !important;}
			.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
			.layui-input{height:30px !important; }
			.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
			.layui-form-search-item label{margin-left: 15px;}
			.layui-table-page {padding: 7px 0px 0px;}
			.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
        </style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab" lay-filter="demo-tab" >

        <!-- 内容开始-->
		 <!-- 搜索栏开始 -->
		<fieldset class="layui-elem-field layui-field-title layui-field-padding">
			<legend class="layui-legend-size">搜索</legend>
			<form class="layui-form table-bar" action="{:cmf_plugin_url('SiteConfig://home_page_config/mbconfigadd')}" lay-filter="form-bar">

				<div class="layui-form-search-item">
				    <label>选择相关店铺</label>
					<div class="layui-inline" >
						<div class="layui-input-inline " style="width: 100px;">
							<select name="store_id" id="">
    						    <option value="qb">全部</option>
    						    <volist name="storelist" id="vo">
    						        <option value="{$vo.store_id}">{$vo.store_name}</option>
    						    </volist>
    						</select>  
						</div>
					</div>
					<label>选择模板</label>
					<div class="layui-inline" >
						<div class="layui-input-inline " style="width: 100px;">
							<select name="mb_id" id="">
    						    <option value="">请选择模板</option>
    						    <volist name="mblist" id="vo">
    						        <option value="{$vo.id}">{$vo.name}</option>
    						    </volist>
    						</select>  
						</div>
					</div>
					
					<div class="layui-inline">
						<div class="layui-input-inline " style="width: 100px;" >
							<select name="field" lay-verify=""  >
							    <option value="all">筛选项</option>
								<option value="title">标题</option>
								<option value="introductory">介绍</option>
							</select>
						</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="keywords" autocomplete="off" placeholder="请输入关键字..." class="layui-input">
						</div>
					</div>
					
					
					<input type="hidden" name="type"  value="{$search['type']|default='0'}" />

					<div class="layui-inline">
						<button type="submit" name="search" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>拉取数据</button>
					</div>
				</div>
			</form>
		</fieldset>
		<!-- 搜索栏结束 -->

		<!-- 内容开始 -->
		<form  class="layui-form" action="">

			<!-- 数据表格开始 -->
			<table class="layui-hide" id="article_tab" lay-filter="article_tab"></table>
			<!-- 数据表格结束 -->

			<!-- 表头部工具开始 -->
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batch_delete">批量删除</button>
					<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="batch_add_mb">模板管理</button>
				</div>
			</script>
			<!-- 表头部工具结束 -->

			<script type="text/html" id="image">
				{{# if( d.img != '' ){ }}
				<img style="width:60px;height:25px;" src="{{d.img}}" alt="">
				{{# } }}
			</script>

			<!--这个是选择框tpl-->
			<script type="text/html" id="show_tpl">
				<input type="checkbox" name="status" value="{d.status}" lay-skin="switch" lay-text="隐藏|显示" lay-filter="show_switch" {{# if(d.status==1){ }} checked {{# } }} >
			</script>

			<!-- toolbar - 工具条模板开始 -->
			<script type="text/html" id="action_bar">
				<div class="layui-btn-group">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs " title="移除"  lay-event="delete">
						<i class="layui-icon">&#xe640;</i>
					</button>
				</div>
			</script>
			<!-- toolbar - 工具条模板结束 -->
		</form>
		<!-- 内容结束 -->
		<!-- 内容结束-->
	</div>
	<!-- layui-tab结束-->

	<include file='public/scripts'>

	<!-- script开始-->	
	<script>

		var form = layui.form
			,layer = layui.layer    //弹出层必需
			,layedit = layui.layedit  //富文本必需
			,laydate = layui.laydate  //日期选择必需
			,table = layui.table  //表格必需
			,element = layui.element;  //选项卡	
			
		form.on( 'submit(demo2)' , function( data ){
		    var field = data.field;

		    if( field.mb_id == '' ){
		        layer.msg( '请选择模板' );
		        return false;
		    }
		    
		    var post = [];
		    for ( let key in field ){
		        post.push( ( key +"="+ field [ key ] ) ); 
		    }
		    post = post.join("&");

		    //渲染表格
            table.render({
                elem: '#article_tab'
                ,cellMinWidth: 40 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,limit:20
                ,url:"{:cmf_plugin_url('SiteConfig://home_page_config/getData')}?"+post//数据接口
                ,method:'post'
				,toolbar: false //开启表格头部工具栏区域
				,cols: [[
				    {type:'checkbox'}
					,{field:'relevance_id',  title: '关联id' , width:50 }
					,{field:'title', title: '标题'}
					,{field:'img',title:'图片' , templet:'#image'}
					,{field:'introductory', title:'简介'}
					,{field:"addr" , title:"地址"}
					,{field:"addr_type" , title:"超链接|路由地址"}
					,{field:"status" , title:"状态",templet: '#show_tpl', unresize: true }
					,{field:"delay" , title:"时间"}
					,{field:'cate_url', title:'操作', width: 70,toolbar:'#action_bar'}
                ]]//设置表头
                ,page:true//开启分页
                ,response: {
                  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
				,parseData: function(res){ //res 即为原始返回的数据
					return {
    					"code": res.code, //解析接口状态
    					"msg": res.message, //解析提示文本
    					"count": res.data.total, //解析数据长度
    					"data": res.data.data //解析数据列表
					};
				}
         
 
            });
            
            //表格工具栏
    		table.on('tool(article_tab)', function(obj){
    			var data = obj.data;
    			if(obj.event === 'delete'){
    			    obj.del();
    			}
    		});
    
		    return false;
		} );
		
		var callbackdata = function(){
		    var checkStatus = table.checkStatus('article_tab');
		    if( checkStatus.data.length == 0 ){
		        
		        return false;
		    }
		    return checkStatus.data;
		}




	</script>
	<!-- script结束-->

</body>
</html>